feat(react-playground): add Execution Target and User Event Triggers prototypes#780
Open
bogdandoaga wants to merge 1 commit into
Open
Conversation
…prototypes - Add ExecutionTargetPrototype (/prototypes/execution-target) for OR-92995: toggle between Cross-platform / Windows, three execution target options with rename badge for "Inherit parent job identity" - Add UserEventTriggersPrototype (/prototypes/user-event-triggers): Orchestrator-style Event Triggers grid with expandable rows for "Configurable by users" triggers, per-user sub-table, side panel with Jobs / History / Traces tabs (opens on row click for both parent triggers and individual user trigger rows), fixed-position ⋮ action menu escaping table overflow - Replace Core/Components/Material sidebar nav with Orchestrator-style folder tree (search, expand/collapse, 19 mock folders) - Adjust MainContent margin-left to match 220px sidebar width Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds two new React “prototype” pages to the react-playground and updates the app shell navigation to better mimic an Orchestrator-like sidebar (folder tree + prototypes section).
Changes:
- Added
ExecutionTargetPrototype(OR-92995) andUserEventTriggersPrototypeprototype pages. - Updated
Approuting to expose the new prototypes under/prototypes/*. - Reworked the sidebar UI + styles (new folder tree mock + prototypes links) and resized the main layout accordingly.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 13 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/react-playground/src/pages/prototypes/UserEventTriggersPrototype.tsx | Adds a large prototype grid with expandable user triggers, row action menu, and a right-side details panel. |
| apps/react-playground/src/pages/prototypes/ExecutionTargetPrototype.tsx | Adds an OR-92995 UI prototype for execution identity option renaming + Windows warning callout. |
| apps/react-playground/src/components/Sidebar.tsx | Replaces the old nav with an Orchestrator-like sidebar (top nav, folder tree, prototypes list). |
| apps/react-playground/src/components/Sidebar.styles.tsx | Implements new sidebar styling primitives and keeps legacy exports as empty placeholders. |
| apps/react-playground/src/App.tsx | Registers new prototype routes. |
| apps/react-playground/src/App.styles.tsx | Adjusts main content offset to match new sidebar width. |
Comment on lines
+1268
to
+1274
| {filteredTriggers.map((trigger) => { | ||
| const expanded = expandedRows.has(trigger.id); | ||
|
|
||
| return ( | ||
| <> | ||
| <GridRow | ||
| key={trigger.id} |
Comment on lines
+1704
to
+1719
| const trigger = MOCK_TRIGGERS.find((t) => t.id === openMenu); | ||
| return MENU_ITEMS.map((item, idx) => | ||
| item === null ? ( | ||
| <MenuDivider key={`div-${idx}`} /> | ||
| ) : ( | ||
| <MenuItem | ||
| key={item} | ||
| $danger={item === "Remove"} | ||
| $disabled={item === "Enable" && trigger?.state === "active"} | ||
| onClick={() => { | ||
| if (item === "View jobs" || item === "View history" || item === "View traces") { | ||
| const tab = item === "View jobs" ? "Jobs" : item === "View history" ? "History" : "Traces"; | ||
| openPanel(openMenu, tab as "Jobs" | "History" | "Traces"); | ||
| } | ||
| setOpenMenu(null); | ||
| }} |
Comment on lines
+1681
to
+1686
| <SPPagination> | ||
| <SPPageBtn disabled>⟨⟨</SPPageBtn> | ||
| <SPPageBtn disabled>⟨</SPPageBtn> | ||
| <span> | ||
| 1 – {(panelTab === "Jobs" ? MOCK_JOBS[panelDataKey] : MOCK_HISTORY[panelDataKey])?.length ?? 0} / {(panelTab === "Jobs" ? MOCK_JOBS[panelDataKey] : MOCK_HISTORY[panelDataKey])?.length ?? 0} | ||
| </span> |
Comment on lines
+1277
to
+1278
| onClick={() => openPanel(trigger.id, "Jobs")} | ||
| style={{ cursor: "pointer" }} |
Comment on lines
+1302
to
+1305
| <TriggerName | ||
| title={trigger.name} | ||
| onClick={() => openPanel(trigger.id, "Jobs")} | ||
| > |
| </SPGridHead> | ||
| {jobs.map((job, i) => ( | ||
| <SPGridRow key={i}> | ||
| <input type="checkbox" style={{ margin: "auto" }} /> |
Comment on lines
+383
to
+388
| const GridRow = styled.tr<{ $expanded: boolean; $configurable: boolean }>` | ||
| border-bottom: 1px solid var(--color-border-de-emp); | ||
| background: ${({ $expanded }) => | ||
| $expanded ? "var(--color-background-selected)" : "var(--color-background-raised)"}; | ||
| border-left: 3px solid ${({ $expanded }) => | ||
| $expanded ? "var(--color-primary)" : "transparent"}; |
Comment on lines
+158
to
+167
| &:hover { | ||
| border-color: ${({ $selected, $disabled }) => | ||
| $disabled ? "var(--color-border-de-emp)" : $selected ? "var(--color-primary)" : "var(--color-border)"}; | ||
| background: ${({ $selected, $disabled }) => | ||
| $disabled | ||
| ? "" | ||
| : $selected | ||
| ? "var(--color-background-selected)" | ||
| : "var(--color-background-secondary)"}; | ||
| } |
Comment on lines
+114
to
+117
| // Filter: show node if it or any descendant matches search | ||
| const selfMatches = matchesSearch(node.label); | ||
| const childMatches = node.children?.some((c) => matchesSearch(c.label)); | ||
| if (!selfMatches && !childMatches) return null; |
Comment on lines
+263
to
+271
| // Keep these exports so nothing that imports them breaks | ||
| export const NavSection = styled.div``; | ||
| export const NavLink = styled(Link)<{ $isActive: boolean }>``; | ||
| export const NavIcon = styled.span``; | ||
| export const NavLabel = styled.span``; | ||
| export const ParentNavButton = styled.button<{ $isActive: boolean }>``; | ||
| export const ChevronIcon = styled.span<{ $isExpanded: boolean }>``; | ||
| export const SubNav = styled.div<{ $isExpanded: boolean }>``; | ||
| export const SubNavLink = styled(Link)<{ $isActive: boolean }>``; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Two new prototype pages in the react-playground under
/prototypes/, plus an Orchestrator-style sidebar replacement.Execution Target prototype (
/prototypes/execution-target)Explores renaming and restructuring the execution target options:
User Event Triggers prototype (
/prototypes/user-event-triggers)Extends the Orchestrator Event Triggers grid for triggers marked "Configurable by users":
getBoundingClientRect()Sidebar
🤖 Generated with Claude Code